<template>
  <div class="main">
    <div class="header">
      <span>智慧大屏</span>
      <div class="showTime">
        {{ time }}
      </div>
    </div>
    <div class="mainbox">
      <div class="left">
        <div class="panel bar">
          <p class="title">景区温度</p>
          <div
            id="chart_01"
            style="width: 90%; height: 80%; margin: 0 auto"
          ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar">
          <p class="title">岗位分布</p>
          <div
            id="chart_02"
            style="width: 90%; height: 80%; margin: 0 auto"
          ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar">
          <div style="width: 50%; height: 100%; float: left">
            <p class="title">员工状态</p>
            <div
              id="chart_03"
              style="width: 100%; height: 80%; margin: 0 auto; float: left"
            ></div>
          </div>
          <div style="width: 50%; height: 100%; float: left">
            <p class="title">车辆状态</p>
            <div
              id="chart_04"
              style="width: 100%; height: 80%; margin: 0 auto; float: left"
            ></div>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="center">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{ countrun }}</li>
              <li>{{ available }}</li>
              <li>{{ countvehicle }}</li>
              <li>{{ countemployee }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>运行车辆</li>
              <li>休息车辆</li>
              <li>车辆总数</li>
              <li>员工总数</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="map4" id="map_1" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="right">
        <div class="panel">
          <div class="info">
            <div
              class="info-hd"
              style="width: 30%; float: left; margin-left: 20px"
            >
              <el-avatar
                style="margin-left: 12px; margin-top: 30px"
                :size="120"
                :src="imgurl"
              />
              <div style="color: white; text-align: center; font-size: 20px">
                {{ username }}
              </div>
            </div>
            <div
              style="
                float: left;
                width: 60%;
                color: white;
                margin-top: 30px;
                padding-left: 10px;
              "
            >
              <div style="margin-bottom: 5px">
                <span>联系方式：</span>
                <span>{{ phone }}</span>
              </div>
              <div>
                <span>登录地点：</span>
                <span>{{ address }}</span>
              </div>
              <div style="text-align: center; margin-top: 20px">
                <el-button
                  type="primary"
                  plain
                  @click="$router.push('/workbench')"
                >
                  <el-icon><HomeFilled /></el-icon>进入后台管理</el-button
                >
              </div>
              <div style="text-align: center; margin-top: 10px">
                <el-button
                  type="info"
                  plain
                  @click="$router.push('/individual')"
                  ><el-icon><Edit /></el-icon>修改密码</el-button
                >
                <el-button
                  type="danger"
                  color="red"
                  plain
                  @click="$router.push('/login')"
                  ><el-icon><SwitchButton /></el-icon>退出登录</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="panel bar">
          <p class="title">客流量(人次)</p>
          <div
            id="chart_05"
            style="width: 90%; height: 80%; margin: 0 auto"
          ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar">
          <p class="title">发车情况(辆)</p>
          <div
            id="chart_06"
            style="width: 90%; height: 80%; margin: 0 auto"
          ></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import {
  getTemperature,
  getPosition,
  getStatusDistributionByEmployee,
  getStatusDistribution,
  getPassengers,
  getDepartures,
  getAvailable,
  getCountRun,
  getCountEmployee,
  getCountVehicle,
} from "../api/data";
import { GetAvatar } from "../api/work.js";
import { onBeforeRouteUpdate } from "vue-router";
import "echarts-gl";
import emeishan from "../json/emeishan.json";

const time = ref("");
const temperature = ref(0);
const distributionData = ref();
const positionData = ref();
const employeeData = ref();
const statusData = ref();
const numberData = ref();
const dateData = ref();
const available = ref();
const countrun = ref();
const countemployee = ref();
const countvehicle = ref();
const imgurl = ref("");
const username = ref("");
const address = ref("");
const phone = ref("");

async function getUser(id) {
  const result = await GetAvatar(id);
  if (result.data.code === 200) {
    const data = result.data.data;
    address.value = data.address;
    phone.value = data.phone;
    imgurl.value = data.avatar;
    username.value = data.username;
  }
}

async function getData() {
  available.value = (await getAvailable()).data.data + 15;
  countrun.value = (await getCountRun()).data.data + 179;
  countemployee.value = (await getCountEmployee()).data.data + 337;
  countvehicle.value = (await getCountVehicle()).data.data + 225;
}

// 更新时间
function getTime() {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  time.value =
    "当前时间：" +
    year +
    "年" +
    month +
    "月" +
    day +
    "日" +
    hour +
    "时" +
    minute +
    "分" +
    second +
    "秒";
}
// 初始化温度图表
async function initTemperatureChart() {
  const chartDom = document.getElementById("chart_01");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const temp = (await getTemperature()).data.data.number;
  temperature.value = temp;
  const option = {
    series: [
      {
        type: "gauge",
        center: ["50%", "70%"],
        startAngle: 200,
        endAngle: -20,
        min: -10,
        max: 40,
        splitNumber: 10,
        itemStyle: {
          color: "#188df0",
        },
        progress: {
          show: true,
          width: 30,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -55,
          length: 10,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -5,
          color: "#999",
          fontSize: 15,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "30%",
          borderRadius: 8,
          offsetCenter: [0, 40],
          fontSize: 20,
          fontWeight: "bolder",
          formatter: "{value} °C",
          color: "inherit",
        },
        data: [
          {
            value: temperature.value,
          },
        ],
      },
    ],
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
}
// 初始化岗位分布图表
async function initpositionChart() {
  const chartDom = document.getElementById("chart_02");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const data = await getPosition();
  distributionData.value = data.data.data.map((item) => item.number);
  positionData.value = data.data.data.map((item) => item.position);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          backgroundColor: "#333",
        },
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      top: "20px",
      bottom: "0",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: positionData.value,
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: distributionData.value,
        barWidth: "60%", // 柱子宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 1, color: "#188df0" },
            ]),
            opacity: 1,
            barBorderRadius: 5,
          },
        },
        label: {
          // 数据标签
          show: true,
          position: "top",
          color: "#fff",
          fontSize: 12,
        },
      },
    ],
  };

  window.onresize = myChart.resize;
  myChart.setOption(option);
}
//初始化员工状态图表
async function initEmployeeChart() {
  const chartDom = document.getElementById("chart_03");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const data = await getStatusDistributionByEmployee();
  employeeData.value = data.data.data.map((item) => ({
    value: item.number,
    name: formatStatus(item.status),
  }));
  function formatStatus(status) {
    switch (status) {
      case -1:
        return "请假";
      case 0:
        return "休息";
      case 1:
        return "在岗";
      default:
        return "未知";
    }
  }
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "80%",
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "70%"],
        center: ["50%", "40%"],
        color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
          "#06b4ab",
          "#06c8ab",
          "#06dcab",
          "#06f0ab",
        ],
        label: {
          show: false,
        },
        labelLine: { show: false },
        data: employeeData.value,
      },
    ],
  };

  myChart.setOption(option);
}
//初始化车辆状态图表
async function initDistributionChart() {
  const chartDom = document.getElementById("chart_04");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const data = await getStatusDistribution();

  statusData.value = data.data.data.map((item) => ({
    value: item.number,
    name: formatStatus(item.status),
  }));
  function formatStatus(status) {
    switch (status) {
      case -1:
        return "维修中";
      case 0:
        return "休息中";
      case 1:
        return "运行中";
      default:
        return "未知";
    }
  }
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "80%",
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "70%"],
        center: ["50%", "40%"],
        color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
          "#06b4ab",
          "#06c8ab",
          "#06dcab",
          "#06f0ab",
        ],
        label: {
          show: false,
        },
        labelLine: { show: false },
        data: statusData.value,
      },
    ],
  };

  myChart.setOption(option);
}
//初始用户数量状态图表
async function initPersonNumberChart() {
  const chartDom = document.getElementById("chart_05");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const data = await getPassengers();

  numberData.value = data.data.data.map((item) => item.number);
  dateData.value = data.data.data.map((item) => item.date);
  function parsedDate() {
    return dateData.value.map((item) => {
      const [year, month, day] = item.split("-");
      return day;
    });
  }
  const parsedDates = parsedDate();

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b",
        },
      },
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      },
    },
    grid: {
      left: "10",
      top: "10",
      right: "10",
      bottom: "10",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)",
          },
        },
        data: parsedDates,
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: "bottom",
        offset: 20,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
    ],
    series: [
      {
        data: numberData.value,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#0184d5",
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)",
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        itemStyle: {
          normal: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}
//初始化发车数量状态图表
async function initDeparturesNumberChart() {
  const chartDom = document.getElementById("chart_06");
  chartDom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(chartDom);
  const data = await getDepartures();
  const numberData = data.data.data.map((item) => item.number);
  const dateData = data.data.data.map((item) => item.date);
  function parsedDate() {
    return dateData.map((item) => {
      const [year, month, day] = item.split("-");
      return day;
    });
  }
  const parsedDates = parsedDate();

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b",
        },
      },
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      },
    },
    grid: {
      left: "10",
      top: "10",
      right: "10",
      bottom: "10",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)",
          },
        },
        data: parsedDates,
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: "bottom",
        offset: 20,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
    ],
    series: [
      {
        data: numberData,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#0184d5",
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)",
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        itemStyle: {
          normal: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}
async function initmap() {
  const mapDom = document.getElementById("map_1");
  mapDom.removeAttribute("_echarts_instance_");
  const myMapChart = echarts.init(mapDom);
  echarts.registerMap("myMap", emeishan);

  // 定义峨眉山市的位置和随机游客数量
  const locations = [
    {
      name: "峨眉山市",
      value: [103.484504, 29.601199],
      tourists: getRandomTouristCount(), // 随机游客数量
    }
  ];

  // 生成随机游客数量的函数
  function getRandomTouristCount() {
    return Math.floor(Math.random() * 10000) + 1; // 生成1到1000之间的随机数
  }

  const option = {
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        if (params.data.tourists) {
          return `${params.name}<br/>今日游客数量: ${params.data.tourists}`;
        }
        return params.name;
      },
    },
    geo: {
      map: "myMap",
      label: {
        emphasis: {
          show: true,
          color: "#fff",
        },
      },
      zoom: 1.2,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: "rgba(20, 41, 87,0.6)",
          borderColor: "#195BB9",
          borderWidth: 1,
        },
        emphasis: {
          areaColor: "#2B91B7",
        },
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: locations,
        symbolSize: 5, // 标记大小
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: true,
          },
        },
        itemStyle: {
          normal: {
            color: "", // 标记颜色
          },
        },
      },
    ],
  };

  myMapChart.setOption(option);
}

onMounted(() => {
  getTime();
  initTemperatureChart();
  initpositionChart();
  initEmployeeChart();
  initDistributionChart();
  initPersonNumberChart();
  initDeparturesNumberChart();
  initmap();
  getData();
  getUser(1);

  setInterval(getTime, 1000);
  setInterval(initTemperatureChart, 30000);
  setInterval(initpositionChart, 30000);
  setInterval(initEmployeeChart, 30000);
  setInterval(initDistributionChart, 30000);
  setInterval(initPersonNumberChart, 30000);
  setInterval(initDeparturesNumberChart, 30000);
  setInterval(getData, 30000);
});
</script>

<style lang="scss" scoped>
@import url("../assets/css/index.css");
</style>
